<template>
	<view>
		<view class="report-head">
			<view class="head-operation">
				<!-- <u-icon name="phone" class="title">统计</u-icon> -->
				<view class="m_header">
					<text>统计</text>
				</view>
				<u-dropdown>
					<u-dropdown-item v-model="duration" :title="durationTitle" :options="durationList">
					</u-dropdown-item>
				</u-dropdown>
			</view>

			<view class="charts-box">
				<qiun-data-charts type="ring" :opts="customRing" :chartData="chartData" background="none" />
			</view>
		</view>

		<view class="head-operation">
			<view class="m_header">
				<text>报修记录</text>
			</view>
		</view>
		<u-line></u-line>
		<view class="record">
			<record-item v-for="(item,index) in recordList" :key="index" :recordItem="item"></record-item>
		</view>
	</view>
	</view>
</template>

<script>
	import recordItem from '../components/record-item.vue'
	export default {
		data() {
			return {
				duration: 0,
				durationTitle: '本周',
				durationList: [{
						label: "本周",
						value: 0
					},
					{
						label: "本月",
						value: 1
					},
					{
						label: "自定义时间",
						value: 2
					},
				],
				recordList: [{
						deviceName: '设备A',
						createTime: '2021-6-8 17:22:31',
						faultDev: '屏幕',
						faultReason: '屏幕排线损坏',
						recordState: 1,
					},
					{
						deviceName: '设备B',
						createTime: '2021-6-8 17:22:31',
						faultDev: '屏幕',
						faultReason: '屏幕排线损坏',
						recordState: 2,
					},
					{
						deviceName: '设备C',
						createTime: '2021-6-8 17:22:31',
						faultDev: '屏幕',
						faultReason: '屏幕排线损坏',
						recordState: 3,
					},
				],
				chartData: {
					categories: [],
					series: [{
						"data": [{
								"name": "待审核",
								"value": 1,
							},
							{
								"name": "待处理",
								"value": 3
							},
							{
								"name": "待维修",
								"value": 5
							},
							{
								"name": "已修好",
								"value": 0
							},
							{
								"name": "已完成",
								"value": 2
							}
						]
					}],
				},
				customRing: {
					"type": "ring",
					"canvasId": "",
					"canvas2d": false,
					"background": "none",
					"animation": true,
					"timing": "easeOut",
					"duration": 1000,
					"padding": [
						5,
						5,
						5,
						5
					],
					"rotate": false,
					"errorReload": true,
					"fontSize": 13,
					"fontColor": "#666666",
					"enableScroll": false,
					"touchMoveLimit": 60,
					"enableMarkLine": false,
					"dataLabel": false,
					"dataPointShape": true,
					"dataPointShapeType": "solid",
					"legend": {
						"show": true,
						"position": "right",
						"float": "center",
						"padding": 5,
						"margin": 5,
						"backgroundColor": "rgba(0,0,0,0)",
						"borderColor": "rgba(0,0,0,0)",
						"borderWidth": 0,
						"fontSize": 13,
						"fontColor": "#666666",
						"lineHeight": 25,
						"hiddenColor": "#CECECE",
						"itemGap": 4,
					},
					"title": {
						"show": false,
						"name": "",
						"fontSize": 15,
						"color": "#666666",
						"offsetX": 0,
						"offsetY": 0
					},
					"subtitle": {
						"show": false,
						"name": "",
						"fontSize": 25,
						"color": "#7cb5ec",
						"offsetX": 0,
						"offsetY": 0
					},
					"extra": {
						"ring": {
							"ringWidth": 30,
							"centerColor": "#FFFFFF",
							"activeOpacity": 0.5,
							"activeRadius": 10,
							"offsetAngle": 0,
							"customRadius": 0,
							"labelWidth": 5,
							"border": false,
							"borderWidth": 3,
							"borderColor": "#FFFFFF",
							"linearType": "none"
						},
						"tooltip": {
							"showBox": true,
							"showArrow": false,
							"showCategory": false,
							"borderWidth": 0,
							"borderRadius": 0,
							"borderColor": "#000000",
							"borderOpacity": 0.7,
							"bgColor": "#000000",
							"bgOpacity": 0.7,
							"gridType": "solid",
							"dashLength": 4,
							"gridColor": "#CCCCCC",
							"fontColor": "#FFFFFF",
							"splitLine": true,
							"horizentalLine": false,
							"xAxisLabel": false,
							"yAxisLabel": false,
							"labelBgColor": "#FFFFFF",
							"labelBgOpacity": 0.7,
							"labelFontColor": "#666666"
						}
					}
				}
			}
		},
		components: {
			recordItem
		},
	}
</script>

<style scoped lang="scss">
	.report-head {
		border-bottom: 20rpx solid #f6f6f6;
	}

	.charts-box {
		width: 100%;
		height: 400rpx;
	}

	.head-operation {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		align-items: center;

		.title {
			flex: 4;
		}

	}

	/deep/ .u-dropdown {}

	/deep/ .u-dropdown__content__mask {
		background: #ffffff !important;
	}

	.m_header {
		position: relative;

		text {
			font-size: 32rpx;
			font-weight: bold;
			padding-left: 30rpx;

		}

		text::before {
			position: absolute;
			left: 0;
			top: 4rpx;
			width: 6rpx;
			height: 36rpx;
			background-color: #009dff;
			border-radius: 3rpx;
			content: ' ';
		}
	}

	::v-deep .u-dropdown__menu__item {
		justify-content: flex-end !important;
	}

	::v-deep .record-item {
		padding: 30rpx;
		border-bottom: 20rpx solid #f6f6f6;
	}

	::v-deep .item-title {
		padding-bottom: 20rpx;
	}

	::v-deep .item-column {
		padding-bottom: 20rpx;
	}

	::v-deep .u-btn--primary {
		margin-top: 20rpx;
	}
</style>
